<template>
  <div class="content">
    <div class="abc">

    <p class="explain">说明：目前支持学科和关键字筛选</p >
    <el-button icon='el-icon-edit'  @click="$router.push('new')" type="success">新增试题</el-button>
    </div>
    <el-form ref="formRef" :model="form" size="medium" label-width="100px">
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select @change="subjectChange" v-model="form.subjectID" placeholder="请选择学科" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in subjectIDOptions"
                :key="index"
                :label="item.label"
                :value="item.value"

              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalogID">
            <el-select v-model="form.catalogID" placeholder="请选择二级目录" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in catalogIDOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select v-model="form.tags" placeholder="请选择标签" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in tagsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="form.keyword" placeholder="请输入关键字" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="form.questionType" placeholder="请选择试题类型" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in questionTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="form.difficulty" placeholder="请选择难度" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in difficultyOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select v-model="form.direction" placeholder="请选择方向" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in directionOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select v-model="form.creatorID" placeholder="请选择录入人" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in creatorIDOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="form.remarks" placeholder="请填写题目备注" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="form.shortName" placeholder="请填写企业简称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" prop="city">
            <el-cascader
              v-model="form.province"
              :options="cityOptions"
              :style="{width: '48%', marginRight: '.5vw'}"
              placeholder="请选择城市"
              clearable
              @change="cityChange"
            >
            </el-cascader>
            <el-cascader
              v-model="form.city"
              :options="citys"
              :style="{width: '48%'}"
              placeholder="请选择城市"
              clearable
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-button size="small" @click="resetForm">清除</el-button>
            <el-button size="small" style="background: #66b1ff; color: #fff" @click="submitForm">搜索</el-button>
          </el-row>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>
<script>
import { simple as subjects } from '@/api/hmmm/subjects.js'
import { simple as tags } from '@/api/hmmm/tags.js'
import { simple as directorys } from '@/api/hmmm/directorys'
import { difficulty, direction, questionType } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  name: 'InputPage',
  props: {
  },
  data () {
    return {
      // 表单对象
      form: {
        subjectID: undefined,
        catalogID: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creatorID: undefined,
        remarks: undefined,
        shortName: undefined,
        city: undefined,
        province: undefined
      },
      // 学科
      subjectIDOptions: [],
      // 二级目录
      catalogIDOptions: [],
      // 标签
      tagsOptions: [],
      // 试题类型
      questionTypeOptions: questionType,
      // 难度
      difficultyOptions: difficulty,
      // 方向
      directionOptions: direction,
      // 录入人
      creatorIDOptions: [
        {
          value: 0,
          label: '超级管理员'
        },
        {
          value: 1,
          label: '录入管理员'
        }
      ],
      // 城市
      cityOptions: [],
      // 地区
      citys: []
    }
  },

  created () {
    // 请求每项简单列表
    this.getData()
    this.province()
  },

  methods: {
    // 请求每项简单列表
    async getData () {
      try {
        // 请求学科列表
        const { data: subject } = await subjects()
        this.subjectIDOptions = subject
      } catch (error) {
        console.log(error)
      }
    },

    // 处理城市数据
    province () {
      this.cityOptions = provinces().map(item => ({
        value: item,
        label: item
      }))
    },

    // 处理区域数据
    cityChange (val) {
      this.citys = citys(val[0]).map(item => ({
        value: item,
        label: item
      }))
    },

    // 二级目录
    async subjectChange (id) {
      try {
        // 二级目录
        const { data } = await directorys({ subjectID: id })
        this.catalogIDOptions = data
        // 请求标签
        const { data: tag } = await tags({ subjectID: id })
        this.tagsOptions = tag
      } catch (error) {
        console.log(error)
      }
    },

    // 搜索
    submitForm () {
      // 调用父组件函数请求列表
      this.$emit('getList', this.form)
    },

    // 重置
    resetForm () {
      this.$refs.formRef.resetFields()
    }

  }
}

</script>
<style lang="less" scoped>
.content {
  min-width: 1450px;
}
.abc{
  margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
  .explain{
    color: #ffc0cb;
    font-size: 14px;
  }
  
}
   
</style>
